<template>
	<view>
		<!-- 门诊缴费线下处方缴费 -->
		<!-- 门诊缴费线下处方缴费 -->
		<UserInfoCardVue></UserInfoCardVue>
		<view class="pad-16r">
			<view class="between-center">
				<view class="start-center">
					<view class="start-center date-change">
						<u-icon name="order" class="mar-0-5"></u-icon>
						<view>{{beginDate}}</view>
					</view>
					<view class="start-center mar-0-5">
						-
					</view>
					<view class="start-center date-change">
						<u-icon name="order" class="mar-0-5"></u-icon>
						<view>{{endDate}}</view>
					</view>
				</view>
				<view class="start-center" @click="showCalendar=true">
					<view>日期选择</view>
					<u-icon name="arrow-down-fill" class="mar-0-5"></u-icon>
				</view>
			</view>
			<view class="flex-1">
				<u-tabs :list="list" :is-scroll="false" bg-color="" :current="current" @change="change"></u-tabs>
			</view>
		</view>

		<!-- 挂号缴费卡片列表 -->
		<view class="pad-16r">
			<view v-for="(item, index) in dataSource" :key="index" class="section-card">
				<view>
					<view class="payment-header between-center">
						<view class="payment-title">{{ item.billDeptName }}</view>
						<view v-if="item.isSelfBilling==0">门诊开单</view>
						<view v-if="item.isSelfBilling==1">自助开单</view>
					</view>

					<view class="payment-content">
						<view class="payment-row">
							<text class="label">开方医生 ：</text>
							<text class="value">{{ item.doctorName }}</text>
						</view>
						<view class="payment-row">
							<text class="label">科室地址 ：</text>
							<text class="value">{{ item.deptAddr }}</text>
						</view>
						<view class="payment-row">
							<text class="label">开方时间 ：</text>
							<text class="value">{{ item.preTime }}</text>
						</view>
						<!-- 					<view class="payment-row">
							<text class="label">处方项目 ：</text>
							<text class="value">常规药敏试验(肺炎链球菌）</text>
						</view> -->
						<view class="payment-row">
							<text class="label">执行科室 ：</text>
							<text class="value">{{item.execDeptName}}</text>
						</view>
						<view class="payment-row">
							<text class="label">单价数量 ：</text>
							<text class="value">{{item.detailNum}}</text>
						</view>
						<view class="payment-row">
							<text class="label">处方编号 ：</text>
							<text class="value">{{item.receiptNo}}</text>
						</view>
						<view class="payment-row" v-if="item.payTime">
							<text class="label">缴费时间 ：</text>
							<text class="value">{{ item.feeTime }}</text>
						</view>
						<view class="payment-row" v-if="item.updateTime">
							<text class="label">更新时间 ：</text>
							<text class="value">{{ item.updateTime }}</text>
						</view>
						<view class="payment-footer">
							<view class="amount">合计金额：<text class="amount-num">￥{{ item.payMoney }}</text></view>
						</view>
						<ButtonAllVue v-if="current==0" @cancel="toOpenRefundDialog(item)" btn-l="开单退费"
							@click="toPresPage(item)" btn-r="处方详情"></ButtonAllVue>
						<view v-if="current==1">
							<!-- 自助开单跳转到自助开单记录，因为自助开单未支付时如有预约，还需先预约，审核通过后才能支付
							处方未支付，直接支付即可 -->
							<ButtonAllVue v-if="item.isSelfBilling==1" @click="toSelfBillingPage(item)" btn-r="开单信息">
							</ButtonAllVue>
							<ButtonAllVue v-if="item.isSelfBilling==0" btn-r="去支付" @click="checkPayOrder(item)">
							</ButtonAllVue>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 底部按钮 -->
		<!-- <button class="record-btn" @click="goToRecord">查看所有缴费记录</button> -->
		<DialogVue :show="showCancel" @close="showCancel=false" @confirm="confirmCancel">
			<view class="text-center">是否确定取消当前预约？</view>
		</DialogVue>
		<DialogVue :show="showRefund" @close="showRefund=false" @confirm="confirmRefund">
			<view class="text-center">是否确定退款？</view>
		</DialogVue>
		<DialogVue :show="showPay" @close="showPay=false" @confirm="confirmPay">
			<view class="text-center">是否立即支付？</view>
		</DialogVue>
		<u-calendar v-model="showCalendar" mode="range" @change="changeCalendar"></u-calendar>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import UserInfoCardVue from "../../../components/UserInfo/UserInfoCard.vue";
	import {
		prescriptionSelectHadPay,
		prescriptionSelectHadPayDetail,
		prescriptionSelectNoPayDetail,
		prescriptionSelectNoPay
	} from "../../../api/prescription";
	import {
		listPrescriptionHadPay
	} from "../../../utils/listPrescriptionHadPay";
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		listPayStatus
	} from "../../../utils/listPayStatus";
	import {
		payOrderUpdatePayStatus,
		payOrderUpdateRefund,
		selectPayOrder
	} from "../../../api/payOrder";
	import {
		dateFormat,
		getFutureDays,
		getFutureSeconds,
		getPastDate
	} from "../../../utils/assist";
	import DialogVue from "../../../components/Dialog/Dialog.vue";
	import ButtonAllVue from "../../../components/Button/ButtonAll.vue";
	export default {
		components: {
			UserInfoCardVue,
			DialogVue,
			ButtonAllVue
		},
		data() {
			return {
				dataSource: "",
				payStatus: '',
				orderTime: '', //下订单时间
				list: [
					// {
					// 	type: 0,
					// 	name: "全部"
					// },
					{
						type: 1,
						name: "已支付"
					},
					{
						type: 2,
						name: "未支付"
					},
					// {
					// 	type: 3,
					// 	name: "待取药"
					// }, {
					// 	type: 4,
					// 	name: "待收货"
					// },
				],
				current: 0,
				showCancel: false,
				showRefund: false,
				payOrder: {}, //支付订单
				showPay: false, //立即支付提示框
				beginDate: '2025-06-22',
				endDate: '2025-08-22',
				showCalendar: false,
				load: false,
			}
		},
		computed: {
			...mapGetters(['hostApi', "userInfo", "currentHospitalInfo"])
		},
		mounted() {
			// 默认查询15分钟内未支付的数据
			// let date = new Date().getTime() - 15 * 60 * 1000
			// date = new Date(date)
			// this.orderTime = dateFormat("yyyy-MM-dd HH:mm:ss", date)
			let date = new Date()
			date.setMonth(date.getMonth() - 1)
			this.beginDate = dateFormat('yyyy-MM-dd', date)
			this.endDate = dateFormat('yyyy-MM-dd', new Date())
			this.init()
		},
		methods: {
			...mapActions(['createPay']),
			init() {
				//paySourceType 1门诊缴费(线下处方) 2急诊缴费  3问诊缴费 4挂号缴费 5自助开单缴费
				// payStatus: 1,// 1 待支付，已下单 2 已超时 3支付成功 4取消 5退款
				this.load = true;
				if (this.current == 0) {
					prescriptionSelectHadPay({
						preType: 0,
						// patId: this.userInfo.patId,
						patId: '396086',
						beginDate: this.beginDate,
						endDate: this.endDate
					}).then(res => {
						console.log(res)
						this.dataSource = res
					}).finally(() => {
						this.load = false
					})
				} else if (this.current == 1) {
					prescriptionSelectNoPay({
						preType: 0,
						patId: this.userInfo.patId,
						// patId: '396120',
						beginDate: this.beginDate,
						endDate: this.endDate
					}).then(res => {
						console.log(res)
						this.dataSource = res
					}).finally(() => {
						this.load = false;
					})
				}

			},
			pay(item) {
				// 支付逻辑
				this.showPay = true;
				this.payOrder = item;
			},

			noPayStatus(item) {
				// 当item里面的支付状态为1时，表示还未支付，
				// 再查看当前时间是否已经过期，如果已经过期，则显示已过期
				// 如果未过期，则可以支付
				if (item.payStatus == 1) {
					let second = getFutureSeconds(item.orderTime);
					// second为负数，表示是现在之前的数据，负数越大表示越久
					let num = 15 * 60 + second //如果加上15分钟还是大于0，表示可用支付
					if (num > 0) {
						return true
					} else {
						item.payStatusName = "已过期"
						return false
					}
				}
			},
			// 只有就诊时间大于今天，且已经支付的情况下，才能退款
			rightVisitTime(item) {
				let days = getFutureDays(item.visitTime);
				if (days > 0) {
					return true
				} else {
					return false
				}
			},
			// 取消预约
			toOpenCancelDialog(item) {
				this.showCancel = true
				this.payOrder = item

			},
			toOpenRefundDialog(item) {
				this.showRefund = true;
				this.payOrder = item

			},
			confirmCancel() {
				this.payOrder.payStatus = 4
				this.payOrder.payStatusName = "取消"
				// 处方取消
				payOrderUpdatePayStatus(this.payOrder).then(res => {
					this.$refs.uToast.show({
						title: '取消成功',
						type: 'success',
					})
					this.goToRecord();
					this.showCancel = false
				})
			},
			confirmRefund() {
				this.payOrder.payStatus = 5
				this.payOrder.payStatusName = "退款"
				// 处方退款
				payOrderUpdateRefund(this.payOrder).then(res => {
					console.log(res)
					this.$refs.uToast.show({
						title: '退款成功',
						type: 'success',
					})
					this.goToRecord();
					this.showRefund = false
				})
			},
			confirmPay() {
				uni.navigateTo({
					url: '/pages/Pay/patientRegisterPay?item=' + JSON.stringify(this.payOrder)
				})
			},
			change(e) {
				this.dataSource = []
				this.current = e
				this.init()
			},
			changeCalendar(e) {
				console.log(e)
				this.beginDate = e.startDate;
				this.endDate = e.endDate;
				this.init()
			},
			toPayDetailPage(item) {
				uni.navigateTo({
					url: '/pages/Home/ServePatient/PrescriptionPayDetail?item=' + JSON.stringify(item)
				})
			},
			// 处方详情
			toPresPage(item) {
				uni.navigateTo({
					url: '/pages/Home/ServePatient/PrescriptionDetail?item=' + JSON.stringify(item)
				})
			},
			// 需要先生成订单，然后进入缴费页面
			// 先判断是否已经存在，如果存在，则直接跳转缴费，否则生成订单,在跳转缴费
			checkPayOrder(item) {
				//paySourceType 1门诊缴费(线下处方) 2急诊缴费  3问诊缴费 4挂号缴费 5自助开单缴费
				// payStatus: 1,// 1 待支付，已下单 2 已超时 3支付成功 4取消 5退款
				// 查询订单里面的处方类型
				// 医生线下开单，处方缴费
				console.log(item)
				selectPayOrder({
					// preType: 0,
					paySourceType: 1,
					payStatus: 1,
					patId: this.userInfo.patId,
					regId: item.preId,
					// orderTime: this.orderTime,
					orderBy: 'create_time desc'
				}).then(res => {
					console.log(res)
					if (res.length == 0) {
						item.preId = item.receiptNo
						this.createOrder(item)
					} else {
						this.toPrescriptionPayPage(res[0])
					}
				})
			},
			createOrder(item) {
				this.form = {
					openId: this.userInfo.openId,
					patId: this.userInfo.patId,
					patName: this.userInfo.patName,
					payMoney: item.payMoney,
					campusCode: this.currentHospitalInfo.code,
					campusName: this.currentHospitalInfo.name,
					departmentCode: item.departmentCode,
					departmentName: item.departmentName,
					departmentAddress: item.departmentAddress,
					doctorCode: item.doctorCode,
					doctorName: item.doctorName,
					doctorPhone: item.doctorPhone,
					doctorHead: item.doctorHead,
					status: 1,
					jobTitle: item.jobTitle,
					paySourceType: 1,
					paySourceName: "门诊缴费", // 1门诊缴费 2急诊缴费 3问诊缴费 4挂号缴费 5自助开单缴费
					// regType: "0", // 0:普通挂号 1:急诊挂号 2:专家挂号 3:点名专家 4:特殊挂号 5:义诊 6:外宾挂号 9 预约挂号
					regCampus: this.currentHospitalInfo.name,
					operatorDeptCode: item.execDeptCode,
					discountMoney: 0, //优惠金额
					payStatus: 1,
					payStatusName: '待支付，已下单',
					deductAccountType: 1,
					regId: item.receiptNo, //处方编号
				}
				this.createPay(this.form).then(res => {
					res = res || []
					this.toPrescriptionPayPage(res)
				})
			},
			// 跳转到处方支付页面
			toPrescriptionPayPage(item) {
				uni.navigateTo({
					url: '/pages/Pay/SelfBillingPay?item=' + JSON.stringify(item)
				})
			},
			toSelfBillingPage(item) {
				let obj = {
					preId: item.preId,
					activeTab: 'history'
				}
				uni.navigateTo({
					url: '/pages/Home/ServePatient/SelfBilling?item=' + JSON.stringify(obj)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.date-change {
		background: #EDEDED;
		border-radius: 16rpx;
		padding: 5px 15px;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 13px;
		color: #333333;
		line-height: 25px;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.register-payment-page {
		background: linear-gradient(#e0f3ff 0%, #fff 30%);
		min-height: 100vh;
		padding: 30rpx 20rpx 40rpx;
	}

	.user-card {
		display: flex;
		align-items: center;
		background: linear-gradient(90deg, #F0FEFF 0%, #b6e0f7 85%, #F0FEFF 100%);
		border-radius: 16rpx 16rpx 0 0;
		padding: 32rpx 40rpx 24rpx;
		position: relative;
	}

	.avatar {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.user-info {
		flex: 1;
		margin-bottom: 10rpx;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
	}

	.user-id {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.switch-user {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 6rpx;
		color: #1ec6e6;
		font-size: 24rpx;
	}

	.switch-icon {
		width: 38rpx;
		height: 38rpx;
		margin-right: 8rpx;
	}

	.section-card {
		background: #fff;
		border-radius: 16rpx;
		margin: 0 0 16px 0;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		// padding: 24rpx 32rpx 18rpx 32rpx;

	}

	.payment-header {
		margin-bottom: 18rpx;
		background-image: url("/static/images/imgs/list-pay-title.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 50px;
		line-height: 40px;
		padding: 0 16px;
	}

	.payment-content {
		border-radius: 16px 16px 16rpx 16rpx;
		padding: 16px;
		background: linear-gradient(180deg, #F0FEFF 0%, #FFFFFF 97%);
		margin-top: -20px;
		box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.06);
	}

	.payment-title {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 500;
		font-size: 16px;
		color: #333333;
		line-height: 40px;
		text-align: left;
		font-style: normal;
	}

	.title-bg {
		position: absolute;
		width: 48rpx;
		height: 15rpx;
		background-color: rgba(65, 207, 230, 0.5);
		bottom: -4rpx;
		left: 20rpx;
		z-index: 0
	}

	.payment-row {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.label {
		color: #888;
		font-size: 28rpx;
	}

	.value {
		color: #333;
		flex: 1;
		font-size: 28rpx;
	}

	.dashed-divider {
		height: 1rpx;
		border-top: 1rpx dashed #e0e0e0;
		margin: 24rpx 0;
		width: 100%;
	}

	.payment-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 18rpx;
	}

	.amount {
		color: #e74c3c;
		font-size: 28rpx;
		flex: 1;
	}

	.amount-num {
		font-weight: bold;
		font-size: 30rpx;
	}

	.pay-btn {
		background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
		color: #fff;
		font-size: 28rpx;
		border-radius: 32rpx;
		padding: 0 38rpx;
		height: 56rpx;
		line-height: 56rpx;
		border: none;
		box-shadow: 0 2rpx 8rpx rgba(65, 207, 230, 0.15);
	}

	.pay-btn.disabled {
		background: #e5e5e5;
		color: #bbb;
		box-shadow: none;
	}

	.record-btn {
		width: 90%;
		margin: 60rpx 5% 0 5%;
		height: 88rpx;
		background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		box-shadow: 0 4rpx 12rpx rgba(65, 207, 230, 0.15);
		border: none;
	}
</style>